<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-07 16:14:44
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-16 15:04:28
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <view class="container_form">

      <template v-for="formItem,i in  formItems">

        <!-- 每一项-->
        <view class="formItem"
              :key="i">

          <!-- 插槽 特殊表单项 -->
          <template v-if="formItem.slot">

            <template v-if="formItem.label === '所在坐标'">
              <view class="doubleRow">
                <view class="label">{{ formItem.label }}：</view>
                <view class="content">
                  <map style="width: 700rpx; height: 400rpx;"
                       :latitude="centerPoint.latitude"
                       :longitude="centerPoint.longitude"
                       :scale="scale"
                       :markers="markers" />

                </view>
              </view>
            </template>

            <template v-if="formItem.label === '营业执照或统一社会信用代码证书照片'">
              <view class="label">{{ formItem.label }}</view>
              <view class="content"
                    v-if="formData[formItem.props]"
                    style="display: flex; align-items: center;">
                <encapsulation-preview :fileUrl="formData[formItem.props]"></encapsulation-preview>
              </view>
              <span v-else>暂无</span>
            </template>
            <template v-if="formItem.label === '消防技术服务合同附件'">
              <view class="doubleRow">
                <view class="label">{{ formItem.label }}：</view>
                <view class="content"
                      v-if="formData[formItem.props]"
                      @click="imageView(baseApiUrl + formData[formItem.props])">
                  <encapsulation-preview :fileUrl="formData[formItem.props]"></encapsulation-preview>
                </view>
                <view>暂无附件</view>
              </view>
            </template>

          </template>

          <!-- 双行 -->
          <template v-else-if="formItem.type === 'doubleRow'">
            <view class="doubleRow">
              <view class="lable">{{ formItem.label }}：</view>
              <view class="value">{{ formData[formItem.props]  || '暂无' }}</view>
            </view>
          </template>

          <!-- 普通表单项 -->
          <template v-else>
            <view class="label">{{ formItem.label }}</view>
            <view class="value">{{ formData[formItem.props] || '暂无'}}</view>
          </template>
        </view>
      </template>
    </view>

  </view>
</template>
<script>
import EncapsulationPreview from '../agency/components/EncapsulationPreview.vue';
import QQMapWX from "@/static/qqmap-wx-jssdk.js";
import { baseApiUrl } from '@/config.js';
export default {
  components: {
    EncapsulationPreview
  },
  data () {
    return {
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "社会单位详情"
        }
      },
      // 表单项
      /*
      label：标题
      props：绑定的字段
      doubleRow：true 双行
      required：必填校验
      slot：插槽，用于地图等其他。
      */
      formItems: [
        { label: '单位类别', props: 'type' },
        { label: '统一社会信用代码', props: 'code' },
        { label: '所属地区', props: 'areaName' },
        { label: '所在坐标', props: 'coordinate', slot: true, },
        { label: '单位详细地址', props: 'address', type: 'doubleRow' },
        { label: '成立时间', props: 'establishTime' },
        { label: '消防安全责任人（法人代表）', props: 'headName' },
        { label: '联系电话', props: 'headPhone' },
        { label: '单位所在楼层', props: 'floor' },
        { label: '各楼层使用功能', props: 'floorUseFunction', type: 'doubleRow' },
        { label: '总建筑面积', props: 'areaSize' },
        { label: '单位消防设施情况', props: 'facilities', type: 'doubleRow' },
        { label: '职工人数', props: 'number' },
        { label: '单位简介', props: 'companyProfile', type: 'doubleRow' },
        { label: '填表人', props: 'writeBy' },
        { label: '联系电话', props: 'writePhone' },
        { label: '营业执照或统一社会信用代码证书照片', props: 'businessLicense', slot: true },
        { label: '当前技术服务机构', props: 'agencyName' },
        { label: '合同签订结束日期', props: 'contractDate' },
        { label: '消防技术服务合同附件', props: 'projectFileUrls', slot: true }
      ],

      formData: null, // 通过后端接口获取到的表单数据

      /**
       * map组件内的数据项
       * key: 高德地图的key
       * centerPoint: 经纬度信息
       * circles: 圆的字段
       * scale: 地图缩放程度
       * markers: 点坐标
       */
      key: "DKCBZ-AX5LV-RVSPF-UA735-DABVO-YLFNJ",
      centerPoint: {
        latitude: null, // 纬度，一般小的
        longitude: null, // 经度， 一般大的
      },
      markers: [],
      scale: 14,
      baseApiUrl: baseApiUrl,
      loading: false,
    }
  },
  onLoad (options) {
    this.getForm(options.unitId)
  },
  mounted () {
    this.meanwhile()
  },
  methods: {
    // 获取表单数据
    getForm (unitId) {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      this.$store.dispatch('socialUnit_from', unitId).then(res => {
        if (res && res.code === 200) {
          this.formData = res.data
          let dist = res.data.coordinate.split(',').map(item => {
            return item.trim()
          })
          this.centerPoint.latitude = dist[1]
          this.centerPoint.longitude = dist[0]
        }
      }).finally(() => {
        let timer = setTimeout(() => {
          this.loading = false
          uni.hideLoading();
          clearTimeout(timer)
        }, 3000);
      })
    },
    // 解析map地图组件
    meanwhile () {
      let that = this;
      uni.authorize({
        scope: "scope.userLocation",
        success () {
          let qqmapsdk = new QQMapWX({
            key: that.key,
          });
          let datas = {
            id: 0,
            latitude: that.centerPoint.latitude, //纬度
            longitude: that.centerPoint.longitude, //经度
            width: 20,
            height: 30,
            alpha: 1, //透明度
          };
          that.$set(that.markers, 0, datas);
        }
      })
    },

    // 图片预览
    imageView (url) {
      uni.previewImage({
        current: 0,
        urls: [url]
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.required {
  &::before {
    content: "*";
    margin: 0 10rpx;
    color: #ea0707;
  }
}

.container_page {
  .container_form {
    padding: 24rpx;

    .formItem {
      display: flex;
      border-bottom: 2rpx solid #ddd;
      line-height: 80rpx;
      flex: 1 1 auto;

      .label {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
      .value {
        flex: 1;
        color: #666;
      }

      & > .label {
        width: 38%;
        margin-right: 24rpx;
      }
      & > .value {
        text-align: right;
      }

      .doubleRow {
        .value {
          margin-left: 24rpx;
        }
      }
    }
  }
}
</style>
